<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表情选择</title>
    <script src="../js/jquery-3.3.1.min.js"></script>

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .emoji{
            margin: 50px;
        }

        ul{
            overflow: hidden;
        }

        li{
            float: left;
            width: 40px;
            height: 40px;
            cursor: pointer;
        }

        .emoji img{
            cursor: pointer;
        }
    </style>

    <script>
        //需求：点击qq表情，将其追加到发言框中
        $(function () {
            //1.给img图片添加onclick事件
            $("ul img").click(function () {

                //2.追加到p标签中即可。
                $(".word").append($(this).clone());
            });
        });
    </script>
</head>
<body>
    <div class="emoji">
        <ul>
            <li><img src="img/01.gif" height="20" width="20" alt=""></li>
            <li><img src="img/02.gif" height="20" width="20" alt=""></li>
            <li><img src="img/03.gif" height="20" width="20" alt=""></li>
            <li><img src="img/04.gif" height="20" width="20" alt=""></li>
            <li><img src="img/05.gif" height="20" width="20" alt=""></li>
            <li><img src="img/06.gif" height="20" width="20" alt=""></li>
            <li><img src="img/07.gif" height="20" width="20" alt=""></li>
            <li><img src="img/08.gif" height="20" width="20" alt=""></li>
            <li><img src="img/09.gif" height="20" width="20" alt=""></li>
            <li><img src="img/10.gif" height="20" width="20" alt=""></li>
            <li><img src="img/11.gif" height="20" width="20" alt=""></li>
            <li><img src="img/12.gif" height="20" width="20" alt=""></li>
        </ul>

        <p class="word">
            <strong>输入文本</strong>
            <img src="img/12.gif" height="20" width="20" alt="">
        </p>
    </div>
</body>
</html>